<template>
  <el-card>
    <template #header>
      <div>useCookieState & useLocalStorageState & useSessionStorageState</div>
    </template>
    <el-descriptions title="User Info">
      <el-descriptions-item label="useCookieState">
        <input
          type="text"
          v-model="message"
          @change="change"
          style="width: 300px"
        />
      </el-descriptions-item>
      <el-descriptions-item label="useLocalStorageState">
        <input
          type="text"
          v-model="message1"
          @change="change1"
          style="width: 300px"
        />
      </el-descriptions-item>
      <el-descriptions-item label="useSessionStorageState">
        <input
          type="text"
          v-model="message2"
          @change="change2"
          style="width: 300px"
        />
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script setup>
  import {
    useCookieState,
    useLocalStorageState,
    useSessionStorageState,
  } from "vue-hooks-plus";
  const [message, setMessage] = useCookieState("useCookieStateString");

  const [message1, setMessage1] = useLocalStorageState(
    "use-local-storage-state-demo1",
    {
      defaultValue: "Hello ~ VueHooks Plus",
    }
  );
  const [message2, setMessage2] = useSessionStorageState(
    "use-session-storage-state-demo1",
    {
      defaultValue: "Hello ~ VueHooks Plus",
    }
  );
  const change = (e) => {
    setMessage(e.target?.value);
  };
  const change1 = (e) => {
    setMessage1(e.target?.value);
  };
  const change2 = (e) => {
    setMessage2(e.target?.value);
  };
</script>
